<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../css/youyi.css"/>
	<link rel="stylesheet" type="text/css" href="../css/environmental.css"/>
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}	
	</style>
	<title>优蚁地图</title>
</head>
<body>
	<div id="allmap">地图加载中...</div>
	<div class="company_detail gray company_detail_gray clear current">
		<div class="cmpy_dtl_left">
			<!--<a href="demand_details.html">-->
				<div class="list_content_box">
					<h2 class="envir_head com_dtl_h clearfix">东莞保力***<span>环境监测</span></h2>
					<div class="envir_contact"><span class="contact_people">联系人：李**</span><span class="contact_phone mui-ellipsis">电话：13800138***</span></div>
					<div class="envir_descript"><p>需求描述：工业酒精0.1砘 擦机水0.5吨 洗板水0.0015吨助焊0.25吨 碎布0.3吨</p></div>
				</div>
			<!--</a>-->
		</div>
	</div>
	<div class="company_detail company_detail_active active clear">
		<!--<a href="http://www.baidu.com">-->
			<div class="cmpy_dtl_left">
				<h1 class="com_dtl_h" data-src="../enterpriseLibrary/enterprise_library.html"><span>广州市广清环保设备有限公司</span><!--<small>(环保工程)</small>--></h1>
				<p class="xingxing_p">
					<span class="xinxin">
						<i class="xinxin_item"><img src="../images/environmenMap/xingxing_bg.png"/></i>
						<i class="xinxin_item"><img src="../images/environmenMap/xingxing_bg.png"/></i>
						<i class="xinxin_item"><img src="../images/environmenMap/xingxing_bg.png"/></i>
						<i class="xinxin_item"><img src="../images/environmenMap/xingxing_bg.png"/></i>
					</span>
					<span class="ammount">推荐指数：85%</span>
				</p>
				<p class="cmpy_label">
					<span class="cmpy_lbl_item green">优蚁认证</span>
					<span class="cmpy_lbl_item blue">协会认证</span>
					<span class="cmpy_lbl_item yellow">工商认证</span>
				</p>
			</div>
			<div class="navigation_div"><span href="javascript:;" class="navigation_btn">导航</span></div>
		<!--</a>-->
	</div>
	<div class="stop_navgat"><a href="javascript:;" class="stop_navgat_btn">停止</a></div>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ZM5FnhEj8ZddP3FpGLM85lPFFVvj1Lgr"></script>
	<script src="http://libs.baidu.com/zepto/0.8/zepto.min.js"></script>
	<script type="text/javascript">
			mui(".cmpy_dtl_left").on("tap",".com_dtl_h",function(){
				mui.openWindow($(this).attr("data-src"));
			});
			
		// 百度地图API功能
		var map = new BMap.Map("allmap");    //创建Map实例
			map.centerAndZoom(new BMap.Point(113.355747, 23.127191), 11);  //初始化地图,设置中心点坐标和地图级别
			map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
			map.setCurrentCity("广州");          //设置地图显示的城市 此项是必须设置的
			map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
			map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
		var curPst=null;
		
		//复杂的自定义覆盖物//"#5ec520","#a0d87d","green_location"
	    function ComplexCustomOverlay(point,text,bgcl,pdid){
	    	if(bgcl=="green"){
	    		bgcl=["#5ec520","#a0d87d","green_location","tuijian.png"];
	    		this._tuijin=bgcl[3];
	    	}else{
	    		bgcl=["#16bbea","#75cee2","blue_location"];
	    	};
	      this._point = point;
	      this._text = text;
	      this._pdid=pdid;
	      //this._overText = mouseoverText;
	      this._bgcl=bgcl[0];
	      this._bdcl=bgcl[1];
	      this._bgImg=bgcl[2];
	    };
	    ComplexCustomOverlay.prototype = new BMap.Overlay();
	    ComplexCustomOverlay.prototype.initialize = function(map){
	      this._map = map;
	      var div = this._div = document.createElement("div");
		      div.style.position = "absolute";
		      div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
		      div.style.background = this._bgcl;
		      div.style.border = "1px solid "+this._bdcl;
		      div.style.padding = "4px 6px";
		      if(this._tuijin){
		      	div.style.paddingRight = "62px";
		      	div.style.background = this._bgcl+" url(../images/environmenMap/"+this._tuijin+") no-repeat 96% center/48px";
		      };
		      div.style.color = "#fff";
		      div.style.lineHeight = "18px";
		      div.style.whiteSpace = "nowrap";
		       
		      div.style.MozUserSelect = "none";
		      div.style.fontSize = "12px"
	      
	      var span = this._span = document.createElement("span");
		      div.appendChild(span);
		      span.appendChild(document.createTextNode(this._text));
		      span.setAttribute("data-id",this._pdid);
	      var that = this;
	
	      var arrow = this._arrow = document.createElement("div");
		      arrow.style.background = "url(../images/environmenMap/"+this._bgImg+".png) no-repeat";
		      arrow.style.position = "absolute";
		      arrow.style.width = "40px";
		      arrow.style.height = "40px";
		      arrow.style.top = "-4px";
		      //arrow.style.bottom = "0px";
		      arrow.style.left = "-40px";
		      arrow.style.overflow = "hidden";
		      div.appendChild(arrow);
	     
	      $(div).on("touchend",function(ev){
	      	var thisText=this.querySelector("span").innerHTML;
	      	var srcId=this.querySelector("span").getAttribute("data-id");
	      	var htmlContent='';
	      	if(that._tuijin){
	      		$(".company_detail").removeClass("current");
	      		$(".company_detail_active").addClass("current").find(".com_dtl_h").attr("data-id",srcId);
	      		$(".company_detail_active").addClass("current").find(".com_dtl_h span").text(thisText);
	      		$(".navigation_div").on("touchend",function(e){
		      		$(".stop_navgat").addClass("active");
		      		$(".stop_navgat_btn").on("touchend",function(){
		      			clearInterval(curPst);
		      			$(this).off("click").removeClass("active");
		      		});
		      		showDiv(that._point.lng,that._point.lat);
		//	      		curPst=setInterval(function(){
		//	      			addMarker();
		//	      		},3000);
					$(this).off("touchend");
					$(".company_detail").removeClass("current");
		      });
	      	}else{
	      		//htmlContent='<a href="demand_details.html">';
//	      		htmlContent = '<div class="list_content_box">';
//	      		htmlContent += '<h2 class="envir_head com_dtl_h clearfix" data-src='+  +'>'+;
//	      		htmlContent += '<span>'+;
//	      		htmlContent += '</span></h2>';
//	      		htmlContent += '<div class="envir_contact"><span class="contact_people">联系人：'+;
//	      		htmlContent += '</span><span class="contact_phone mui-ellipsis">电话：'+;
//	      		htmlContent += '</span></div>';
//	      		htmlContent += '<div class="envir_descript"><p>需求描述：'+;
//	      		htmlContent += '</p></div></div>';
	      		
	      		$(".company_detail").removeClass("current");
	      		$(".company_detail_gray").addClass("current").find(".com_dtl_h span").text(thisText);
	      	};
	      	//$(this).off("touchend");
			//showDiv(that._point.lng,that._point.lat);
			ev.cancelBubble=true;
			return false;
	     });
	     
	      map.getPanes().labelPane.appendChild(div);
	      return div;
	    };
	    ComplexCustomOverlay.prototype.draw = function(){
	      var map = this._map;
	      var pixel = map.pointToOverlayPixel(this._point);
		      this._div.style.left = pixel.x - parseInt(this._arrow.style.left)-20 + "px";
	     	 this._div.style.top  = pixel.y - 30 + "px";
	    };
	    $(".BMap_mask").on("touchstart",function(ev){
	    	$(".company_detail").removeClass("current");
	    });
	    
	     function mcoFn(lng,lat,text,bgcl,pdid){
	     	//point,text,bgcl,pdid
	     	var point=new BMap.Point(lng,lat);
	     	var myCompOverlay = new ComplexCustomOverlay(point,text,bgcl,pdid);
	    		map.addOverlay(myCompOverlay);
	     };
	     
	     function showDiv(divLng,divLat){
	     	navigator.geolocation.getCurrentPosition(function(clbck){
	     		drawMap(divLng,divLat,clbck.coords.longitude,clbck.coords.latitude);
	      	});
	      	//console.log(JSON.stringify(currnetPosition));
	     };
	     
	     function addMarker(longitude,latitude){
	     	navigator.geolocation.getCurrentPosition(function(clbck){
	     		var new_point = new BMap.Point(clbck.coords.longitude,clbck.coords.latitude);//clbck.longitude,clbck.latitude
				var marke = new BMap.Marker(new_point);//创建标注
					$(".BMap_noprint").remove();					
					$(".BMap_Marker").not(":nth-child(1),:nth-child(2)").remove();
					$(".BMap_Marker").parent().next("div").find("span").remove();
					map.addOverlay(marke);//将标注添加到地图中
					//map.panTo(new_point);
	      		
	      });
	};
	
	     
	     function drawMap(p1_0,p1_1,p2_0,p2_1){
	     	var allOverlay = map.getOverlays();
				if(allOverlay[1].V.className=="BMap_Marker BMap_noprint"){
					map.removeOverlay(allOverlay[1]);
					map.removeOverlay(allOverlay[2]);
					map.removeOverlay(allOverlay[3]);
				};
	     	//113.355747,"lat":23.12719
	     	var p1 = new BMap.Point(p1_0,p1_1);//(113.355747,23.12719);
			var p2 = new BMap.Point(p2_0,p2_1);//(113.3855747,22.12719);
			//var p3 = new BMap.Point(113.345747,23.14719);
			//var p4 = new BMap.Point(113.3855747,22.12719);
			var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
				driving.search(p2,p1);
//				setTimeout(function(){
//					console.log($(".BMap_Marker:last-child").css("left"));
//					$(".BMap_Marker:last-child").css("left",parseInt($(".BMap_Marker:last-child").css("left"))-16);
//				},1000);
	     };
	   //mcoFn("经度","纬度","标题","类型");
	    mcoFn("113.355747","23.527191","广州市广清环保设备有限公司1","green",77);
	    //mcoFn("113.355747","23.227291","寻求：环保工程","blue");
	    mcoFn("113.455747","23.627191","广州市软捷网络科技有限公司2","green",78);
	    mcoFn("113.555747","23.247191","广州市软捷网络科技有限公司3","green",79);
	    //mcoFn("113.255747","23.027291","环保维护集团","blue");	    
	</script>
	</body>
</html>
